import React from 'react';
import {connect} from 'dva/index';
import {Button, Checkbox, Col, DatePicker, Form, Input, InputNumber, Modal, Radio, Row} from 'antd';
import RoleSelect from "../common/roleSelect";
import BizParams from "../common/BizParams";
import PortSelect from "../common/portSelect";
import Constants from '../../utils/Constants';
import moment from 'moment';

const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const R = require("ramda");
const CheckboxGroup = Checkbox.Group;

const onlineBookingDetail = Form.create()(class OnlineBookingDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: false
        }
    }

    handleOpen = (disabled) => {
        this.setState({ open: true, disabled });
    }

    handleCancel = () => {
        this.setState({ open: false });
        this.props.form.resetFields();
    }

    handleConfirm = (status) => {
        this.props.form.validateFields({ force: true }, (errors, values) => {
            if (errors) return;
            values.quickBookingId = this.props.quickBooking.dataSource && this.props.quickBooking.dataSource.quickBookingId ? this.props.quickBooking.dataSource.quickBookingId : null;
            values.status = status;
            values.loadingTime = values.loadingTime ? values.loadingTime.format(Constants.DATEFORMAT) : undefined;
            if (!R.equals(R.pick(Object.keys(values), this.props.quickBooking.dataSource), values)) {
                this.props.dispatch({
                    type: R.isNil(values.quickBookingId) ? 'quickBooking/updateOnlineBooking' : 'quickBooking/updateOnlineBooking',
                    payload: {
                        ...values,
                        onSuccess: () => {
                            this.handleCancel();
                            if (this.props.refreshList) this.props.refreshList();
                        }
                    }
                })
            } else this.handleCancel();
        });
    }

    render() {
        let dataSource = this.props.quickBooking.dataSource ? this.props.quickBooking.dataSource : {};
        let quickBooking = this.props.quickBooking.quickBooking ? this.props.quickBooking.quickBooking : {};
        let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } };
        let formItemLayout2 = { labelCol: { span: 4 }, wrapperCol: { span: 19 } };
        const { getFieldDecorator } = this.props.form;
        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this, 1)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
            <Button key="submit" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this, 2)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>提交</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];

        let supplierList = [];
        let serviceItem = this.props.form.getFieldValue('serviceItems');
        if (serviceItem === '3') supplierList = this.props.supplier.airList ? this.props.supplier.airList : [];
        if (serviceItem === '1' || serviceItem === '2') supplierList = this.props.supplier.supplierList ? this.props.supplier.supplierList : [];
        let berthingCompanyList = this.props.berthingCompany.berthingCompanyList ? this.props.berthingCompany.berthingCompanyList : [];
        return (
            <Modal maskClosable={false} visible={this.state.open} width={1000} title={"订舱详情"} confirmLoading={this.props.loading} onCancel={this.handleCancel.bind(this)} footer={footer}>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="shipper(发货人)" hasFeedback>
                                {getFieldDecorator('shipper', {
                                    initialValue: dataSource.shipper
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="consignee(收货人)" hasFeedback>
                                {getFieldDecorator('consignee', {
                                    initialValue: dataSource.consignee
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="notifyParty(通知人)" hasFeedback>
                                {getFieldDecorator('notifyParty', {
                                    initialValue: dataSource.notifyParty
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="transitPort(中转港)" hasFeedback>
                                {getFieldDecorator('transitPort', {
                                    initialValue: dataSource.transitPort
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="markNos(唛头)" hasFeedback>
                                {getFieldDecorator('markNos', {
                                    initialValue: dataSource.markNos
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="goosDesc(货物描述)" hasFeedback>
                                {getFieldDecorator('goosDesc', {
                                    initialValue: dataSource.goosDesc
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="货物名" hasFeedback>
                                {getFieldDecorator('product', {
                                    initialValue: quickBooking.product
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="packagesNum(件数)" hasFeedback>
                                {getFieldDecorator('packagesNum', {
                                    initialValue: dataSource.packagesNum
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="装柜时间" hasFeedback>
                                {getFieldDecorator('loadingTime', {

                                    initialValue: dataSource.loadingTime ? moment(dataSource.loadingTime, Constants.DATEFORMAT) : undefined
                                })(
                                    <DatePicker disabled={true} style={{ width: '100%' }} />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="装柜时间" hasFeedback>
                                {getFieldDecorator('deliveryDate', {

                                    initialValue: dataSource.deliveryDate ? moment(dataSource.deliveryDate, Constants.DATEFORMAT) : undefined
                                })(
                                    <DatePicker disabled={true} style={{ width: '100%' }} />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                        <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="订舱联系人" hasFeedback>
                                {getFieldDecorator('linkman', {
                                    initialValue: dataSource.linkman
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="邮箱" hasFeedback>
                                {getFieldDecorator('email', {
                                    initialValue: dataSource.email
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="手机" hasFeedback>
                                {getFieldDecorator('mobile', {
                                    initialValue: dataSource.mobile
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="固定电话" hasFeedback>
                                {getFieldDecorator('telephone', {
                                    initialValue: dataSource.telephone
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <Row>
                    <Col span={24}>
                        <FormItem {...formItemLayout2} label="装柜详细地址" hasFeedback>
                            {getFieldDecorator('detailAddress', {
                                initialValue: dataSource.detailAddress
                            })(
                                <Input disabled={true} maxLength="500" />
                            )}
                        </FormItem>
                    </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="订舱(创建)时间" hasFeedback>
                                {getFieldDecorator('createtime', {
                                    initialValue: dataSource.createtime
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="舱单流水号" hasFeedback>
                                {getFieldDecorator('seqNo', {
                                    initialValue: quickBooking.seqNo
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Col span={21}>
                        <FormItem {...formItemLayout2} label={'海运服务'}>
                            {getFieldDecorator('shipping', {
                                initialValue: dataSource.shipping == 1 ? "1":(dataSource.shipping == 2 ? "2":(dataSource.shipping == 3 ? "3":(dataSource.shipping == 4 ? "4":[]))),
                            })(
                                <RadioGroup style={{ width: 800 }} disabled={true}>
                                    <Radio value="1">海运整柜</Radio>
                                    <Radio value="2">海运散货</Radio>
                                    <Radio value="3">整柜双清</Radio>
                                    <Radio value="4">散货双清</Radio>
                                </RadioGroup>
                            )}
                        </FormItem>
                    </Col>
                    <Row>
                        <Col span={21}>
                            <FormItem {...formItemLayout2} label={'港前服务'}>
                                {getFieldDecorator('portService', {
                                    initialValue: dataSource.portService == 1 ? "1":(dataSource.portService == 2 ? "2":(dataSource.portService == 3 ? "3":[])),
                                    // initialValue: portItem
                                })(
                                    <CheckboxGroup style={{ width: 800 }}>
                                        <Checkbox value="1" disabled={ true}>拖车</Checkbox>
                                        <Checkbox value="2" disabled={true}>报关</Checkbox>
                                        <Checkbox value="3" disabled={true }>仓库内装</Checkbox>
                                    </CheckboxGroup>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={21}>
                            <FormItem {...formItemLayout2} label={'增值服务'}>
                                {getFieldDecorator('vasService', {
                                    initialValue: dataSource.vasService == 1 ? "1":(dataSource.vasService == 2 ? "2":(dataSource.vasService == 3 ? "3":[])),
                                })(
                                    <CheckboxGroup style={{ width: 800 }}>
                                        <Checkbox value="1" disabled={true}>产地证</Checkbox>
                                        <Checkbox value="2" disabled={true}>保险</Checkbox>
                                        <Checkbox value="3" disabled={true}>商检</Checkbox>
                                    </CheckboxGroup>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="服务类型" hasFeedback>
                                {getFieldDecorator('serviceItems', {
                                    initialValue: quickBooking.serviceItems
                                })(
                                    <BizParams sprCode="bookingType" disabled={true} style={{ width: '100%' }} onChange={() => this.props.form.setFieldsValue({ supplierId: undefined })} />
                                )}
                            </FormItem>
                        </Col>

                        <Col span={12}>
                            <FormItem {...formItemLayout} label="货物名" hasFeedback>
                                {getFieldDecorator('product', {
                                    initialValue: quickBooking  .product
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="目的港" hasFeedback>
                                {getFieldDecorator('destination', {
                                    initialValue: quickBooking.destination ? quickBooking.destination + "" : undefined
                                })(
                                    <PortSelect disabled={true} />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="起运港" hasFeedback>
                                {getFieldDecorator('loading', {
                                    initialValue: quickBooking.loading ? quickBooking.loading + "" : undefined
                                })(
                                    <PortSelect disabled={true} />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="20GP(数量)" hasFeedback>
                                {getFieldDecorator('size20gp', {
                                    initialValue: quickBooking.size20gp
                                })(
                                    <InputNumber disabled={true} min={0} maxLength="18" style={{ width: '100%' }} />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="20GP(重量)" hasFeedback>
                                {getFieldDecorator('weight20gp', {
                                    initialValue: quickBooking.weight20gp
                                })(
                                    <InputNumber disabled={true} placeholder="单位：KGS" min={0} maxLength="18" style={{ width: '100%' }} />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="40GP(数量)" hasFeedback>
                                {getFieldDecorator('size40gp', {
                                    initialValue: quickBooking.size40gp
                                })(
                                    <InputNumber disabled={true} min={0} maxLength="18" style={{ width: '100%' }} />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="40GP(重量)" hasFeedback>
                                {getFieldDecorator('weight40gp', {
                                    initialValue: quickBooking.weight40gp
                                })(
                                    <InputNumber disabled={true} placeholder="单位：KGS" min={0} maxLength="18" style={{ width: '100%' }} />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="40HQ(数量)" hasFeedback>
                                {getFieldDecorator('size40hq', {
                                    initialValue: quickBooking.size40hq
                                })(
                                    <InputNumber disabled={true} min={0} maxLength="18" style={{ width: '100%' }} />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="40HQ(重量)" hasFeedback>
                                {getFieldDecorator('weight40hq', {
                                    initialValue: quickBooking.weight40hq
                                })(
                                    <InputNumber disabled={true} placeholder="单位：KGS" min={0} maxLength="18" style={{ width: '100%' }} />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="总体积" hasFeedback>
                                {getFieldDecorator('volume', {
                                    initialValue: quickBooking.volume
                                })(
                                    <InputNumber disabled={true} placeholder="单位：CBM" min={0} maxLength="18" style={{ width: '100%' }} />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="总重量" hasFeedback>
                                {getFieldDecorator('weight', {
                                    initialValue: quickBooking.weight
                                })(
                                    <InputNumber disabled={true} placeholder="单位：KGS" min={0} maxLength="18" style={{ width: '100%' }} />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>


                        <Col span={12}>
                            <FormItem {...formItemLayout} label="分配业务员" hasFeedback>
                                {getFieldDecorator('salesId', {
                                    rules: [{
                                        required: true, message: '请分配业务员',
                                    }],
                                    initialValue: quickBooking.salesId ? quickBooking.salesId + "" : undefined
                                })(
                                    <RoleSelect role={Constants.ROLE.SALES_MAN} disabled={this.state.disabled} style={{ width: '100%' }} />
                                )}
                            </FormItem>
                        </Col>

                        <Col span={12}>
                            <FormItem {...formItemLayout} label="备注信息" hasFeedback>
                                {getFieldDecorator('remark', {
                                    initialValue: quickBooking.remark
                                })(
                                    // <Input.TextArea disabled={true} maxLength="200" style={{ width: '100%' }}  />
                                    <Input disabled={this.state.disabled} maxLength="2000" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.onlineBooking, quickBooking: state.quickBooking, supplier: state.supplier, berthingCompany: state.berthingCompany
    };
}

export default connect(mapStateToProps)(onlineBookingDetail);